<template>
  <div class="div" ref="div">
>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'
import {goxiang} from '../../request/index'
const option=reactive({
    tooltip : {
        trigger: 'axis'
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '3%',
        top:"10%",
        containLabel: true
    },
 
 
    calculable : true,
    xAxis :null,
    yAxis :null,
    series : [
        {
            name:'2018年',
            type:'bar',
             barWidth: '10%',
             itemStyle: {
            normal: {
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#f0017b'
                }, {
                    offset: 1,
                    color: '#a01ef1'
                }]),
                barBorderRadius: 10,
                
            }
            
          },
            data:[1000,1500, 5800, 85000, 50000,3000],
        },
        {
            name:'2019年',
            type:'bar',
             barWidth: '10%',
            itemStyle: {
            normal: {
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#00a0fb'
                }, {
                    offset: 1,
                    color: '#00c1d9'
                }]),
            barBorderRadius: 10,
            }
          },
            data:[2000,3000, 6500, 8800, 3000,3500]
        },
          {
            name:'2024年',
            type:'bar',
            barWidth: '10%',
            itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#7a7054'
                }, {
                    offset: 1,
                    color: '#ebb70a'
                }]),
            barBorderRadius: 10,
            }
          },
            data:[2000,30000, 6500, 8800, 3000,3500]
        }
    ]
})


// const series=[
//       {
//         name:'2018',
//         data:[1000,1500, 5800, 85000, 50000,3000],
//       },
//        {
//         name:'2018',
//         data:[1000,1500, 5800, 85000, 50000,3000],
//       },
// ]

// const arrys=[
//   {
//     data:[1020,1580, 5880, 85060, 50250,4100]
//   },
//    {
//     data:[8541,1584, 5754, 65487, 50214,5210]
//   }
// ]


const div=ref()
let myChart 
onMounted(()=>{
    
    goxiang().then(res=>{
        console.log('去向',res.data.data);
         myChart=echarts.init(div.value)
            option.xAxis=res.data.data.xAxis
            option.yAxis=res.data.data.yAxis
            let fordata=res.data.data.series
    
      option.series.forEach((item,index)=>{
        if(fordata[index]){
          item.data=fordata[index].data
        }
      })
        console.log( option.series);    
              
         myChart.setOption(option)
    })
   
   


})
  window.addEventListener('resize', function() {
    myChart.resize();
  });


</script>

<style scoped>
.div{
   
   height: 260px;
    width: 85%;
}
</style>